<!--
  @Descripttion：离线导入任务管理
  @Author：zqy
  @Date：2020-12-08 17:26:49
  @Last Modified by：zqy
  @Last Modified time：2020-12-08 17:26:49
-->
<template>
<el-dialog
  title="离线导入任务"
  top="0vh"
  :visible.sync="innerVisible"
  append-to-body
  fullscreen
  width="100%"
  custom-class="full-screen-dialog"
  :before-close="closeDialog"
>
  <div class="qup-full-page">
    <template v-if="showEditPage">
      <edit-task
        ref="refAdd"
        :page-show.sync="showEditPage"
        :task-basic="activeTask"
        :task-config="taskConfig"
        @change-state="handleChangeState"
      />
    </template>
    <div v-show="showHome">
      <div>
        <search-form ref="refSearch" :search-config="searchConfig" @search="handleSearch" />
      </div>
      <div class="table-container">
        <table-box
          ref="refTable"
          :table-config="tableConfig"
          :other-filters="otherFilters"
          :other-raw="otherRaws"
          :off-set="-20"
          show-index
          :selected-arry.sync="tableSelected"
          @btnOperate="btnOperate"
        >
          <el-table-column fixed="right" label="操作" width="150">
            <template v-slot="{row}">
              <el-button v-if="[20,30,40].indexOf(Number(row.importState || 0))>-1" type="text" size="mini" class="btn-green" @click="handleEdit(row)">编辑</el-button>
              <el-button 
                v-if="[50,60,70].indexOf(Number(row.importState || 0))===-1"
                type="text" 
                size="mini" 
                style="color:#999" 
                @click="handleStopTask(row)">终止</el-button>
            </template>
          </el-table-column>
        </table-box>
      </div>
    </div>
  </div>
</el-dialog>
</template>

<script>
import { parseTime,importStatusList } from './utils'
import {getApiPrefix, taskStop } from './api'
import EditTask from './Edit'
export default {
  name: 'ImportTask',
  components: { EditTask },
  props: {
    visible:{
      type:Boolean,
      default:false
    },
    taskConfig:{
      type:Object,
      default:()=>{
        return {
          apiPrefix:'',// 应用接口前缀,如:ucenter,po-center,top-purchase
          checkRowApi:'',//行校验接口地址(后端提供)
          checkApi:'', //全量检查业务（自定义接口，后端提供）
          completeApi:'',//任务完成执行（回写业务操作）
          exportTempApi:'',// 临时数据导出接口，若接口不存在，则不允许导出临时数据
          taskFiltersRaw:[],  // 任务查询条件
          saveTempEmpty:false,// 是否保存null值为空字符串
          saveTempApi:'',//自定义临时数据保存接口
        }
      }
    } // 离线任务接口配置
  },
  data() {
    return {
      searchConfig: [
        { label: '任务名称', prop: 'taskName', type: 'text' },
        /* {
          label: '任务模板', prop: 'taskTemplate', type: 'select',
          config: {
            remote: true,
            remoteUrl: `/data-dict/api/v2/dictionary/PUR_ORDER_STATE?appCode=order-center&domainCode=marketing`,
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        }, */
        // 导入状态：上传数据， 校验数据 ， 确认数据 ， 写入数据 ， 已完成 ， 异常
        {
          label: '导入状态', prop: 'importState', type: 'select',
          config: {
            remote: false,
            selectData: [
              { label: '导入中', value: '10' },
              { label: '导入完成', value: '20' },
              { label: '校验中', value: '30' },
              { label: '校验完成', value: '40' },
              { label: '写入中', value: '50' },
              { label: '完成', value: '60' },
              { label: '终止', value: '70' },
              { label: '异常', value: '0' },
            ]
          }
        },
        // { label: '菜单路径', prop: 'menuPath', type: 'text' },
        { label: '创建时间', prop: 'createTime', type: 'date', value: [] }
      ],
      otherRaws: {},
      defaultFilter:[],// 默认的查询条件
      otherFilters: [],
      tableSelected: [], // 当前所选中表格行数据
      tableConfig: {
        interfacePath: `${getApiPrefix(this.taskConfig.apiPrefix)}/api/v1/excel/task/current/page`, //分页查询任务列表：应用前缀 + 共用接口地址
        hideFuncBar: true,
        pageSize: 20,
        tabIndex: 9999,
        sort: 'createTime',
        order: 'desc',
        setting: [
        {
          prop: 'taskName',
          label: '任务名称',
          minWidth: 200
        },
        {
          prop: 'templateCode',
          label: '任务模板',
          minWidth: 200,
          type: 'hidden'
        },
        // {
        //   prop: 'menuPath',
        //   label: '菜单路径',
        //   minWidth: 200
        // },
        {
          prop: 'importState',
          label: '导入状态',
          minWidth: 120,
          formatData: ({ importState }) => {
            return  importStatusList[importState]
          }
          /* type: 'select',
          propEnum: {
            domainCode: 'marketing',
            appCode: 'order-center',
            dictTypeCode: 'PUR_ORDER_STATE'
          } */
        },
        {
          prop: 'isError',
          label: '是否异常',
          minWidth: 100,
          formatData: ({ isError }) => {
            return isError?'是':'否'
          }
        },
        {
          prop: 'total',
          label: '总条数',
          minWidth: 100
        },
        {
          prop: 'createBy',
          label: '创建人',
          minWidth: 100
        },
        {
          prop: 'createTime',
          label: '创建时间',
          minWidth: 150,
          formatData: ({ createTime }) => {
            return parseTime(createTime, '{y}-{m}-{d} {h}:{i}:{s}')
          }
        }],
        btnList: [{
          buttonName: '编辑任务',
          optCode: 'edit',
          outerFlag: true
        }, {
          buttonName: '终止任务',
          optCode: 'stop',
          outerFlag: true
        }]
      },
      activeTask: '', // 当前编辑的任务ID
      showEditPage: false, // 编辑任务
    }
  },

  computed: {
    showHome() {
      return !this.showEditPage
    },
    innerVisible:{
      get(){
        return this.visible
      },
      set(val){
        this.$emit('update:visible',val)
      }
    }
  },
  created(){
    let defaultFilter =[]
    if(this.$route.query && this.$route.query.menuCode){
      const menuCode = this.$route.query.menuCode
      defaultFilter.push({
        id: 'menuCode',
        property: 'menuCode',
        operator: '=',
        value: menuCode
      })
    }
    if(this.taskConfig.taskFiltersRaw && this.taskConfig.taskFiltersRaw.length){
      defaultFilter = [...defaultFilter,...this.taskConfig.taskFiltersRaw]
    }
    this.otherFilters = defaultFilter
    this.defaultFilter = defaultFilter
  },
  mounted(){
    /* this.$nextTick(()=>{
      this.$refs.refSearch.initLayOutData()
    }) */
  },

  methods: {
    closeDialog() {
      this.innerVisible = false
      this.$emit('close')
    },
    // 搜索
    handleSearch(params) {
      this.otherFilters =this.defaultFilter.concat(params.filtersRaw || []) 
      this.otherRaws = params.paramsRaw || {}
      this.refreshTable(true)
    },
    btnOperate(flag) {
      // 表格组件操作响应
      switch (flag) {
        case 'edit':
          if (this.tableSelected.length!=1) {
            this.$message.warning('请选择【编辑任务】行')
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'stop':
          if (this.tableSelected.length!=1) {
            this.$message.warning('请选择【终止任务】行')
            return
          }
          this.handleStopTask(this.tableSelected[0])
          break
        default:
          break
      }
    },
    // 刷新表格数据
    refreshTable(isInit) {
      this.$nextTick(()=>{
        this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
      })
    },
    // 编辑任务
    handleEdit(row) {
      this.activeTask = row
      this.showEditPage = true
    },
    // 终止任务
    handleStopTask(row) {
      const taskId = row.id
      this.$confirm('确定要【终止】当前所选任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        taskStop(this.taskConfig.apiPrefix,taskId).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '任务终止成功',
              type: 'success'
            })
            this.handleChangeState(70) // 任务状态改变
          }
        })
      })
    },
    // 任务状态更新 
    handleChangeState(importState){
      // 10 导入中 , 20 导入完成 ， 30  校验中 ， 40 校验完成  ， 50 写入中 ， 60 写入完成 ， 70 终止， 0  终止
      /* if(importState == 60){
        this.$emit('task-complete') // 任务执行完成
      }else{
        this.$emit('change-state',importState) // 任务状态改变
      } */
      this.refreshTable()
    }
  }
}
</script>
<style lang='scss'>
/* @import url(); 引入css类 */
</style>
